<template>
  <div>
    <div class="topDIV">
      <InteractiveLaunch style="width:30%" />
      <KeyTrackingAreas style="width:39%" />
      <KeyTrackingTargets style="width:30%" />
    </div>
    <div class="middleDIV">
      <LinkTest style="width:30%" />
      <TargetElevationSettingCommand style="width:39%" />
      <Timing style="width:30%" />
    </div>
    <div class="bottomDIV">

      <DirectTransmissionParameters style="width:48%" />
      <DirectTransmissionStartStop style="width:48%" />
      <BroadcastingInformationVehicle style="width:100%;margin-top:10px" />
    </div>
  </div>
</template>

<script>
import BroadcastingInformationVehicle from'./modules/BroadcastingInformationVehicle'
import InteractiveLaunch from './modules/InteractiveLaunch'
import KeyTrackingAreas from './modules/KeyTrackingAreas'
import KeyTrackingTargets from './modules/KeyTrackingTargets'
import LinkTest from './modules/LinkTest'
import TargetElevationSettingCommand from './modules/TargetElevationSettingCommand'
import Timing from './modules/Timing'
import DirectTransmissionParameters from './modules/DirectTransmissionParameters'
import DirectTransmissionStartStop from './modules/DirectTransmissionStartStop'

export default {
  name: 'ControlStarIndex',
  components: {
    BroadcastingInformationVehicle,
    InteractiveLaunch,
    KeyTrackingAreas,
    KeyTrackingTargets,
    LinkTest,
    TargetElevationSettingCommand,
    Timing,
    DirectTransmissionParameters,
    DirectTransmissionStartStop
  }

}
</script>

<style lang='less' scoped>
.topDIV,
.middleDIV {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.bottomDIV {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>